/*
 * Copyright 2022 Nightingale Team
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */
import React, { useEffect } from 'react';
import { Form, Select, Row, Col, InputNumber, Input, Switch } from 'antd';
import _ from 'lodash';
import { useTranslation, Trans } from 'react-i18next';
import { Panel } from '../../Components/Collapse';
import { calcsOptions } from '../../config';
import ColorPicker from '../../../Components/ColorPicker';
import { useGlobalState } from '../../../globalState';

export default function GraphStyles() {
  const { t } = useTranslation('dashboard');
  const namePrefix = ['custom'];
  const [statFields, setStatFields] = useGlobalState('statFields');
  const fields = _.compact(_.concat(statFields, 'Value'));

  useEffect(() => {
    return () => {
      setStatFields([]);
    };
  }, []);

  return (
    <Panel header={t('panel.custom.title')} data-oid='fbgxqfn'>
      <>
        <Row gutter={10} data-oid='2-uv97d'>
          <Col span={8} data-oid='qaqtezm'>
            <Form.Item label={t('panel.custom.calc')} name={[...namePrefix, 'calc']} tooltip={t('panel.custom.calc_tip')} data-oid='ls7lsaz'>
              <Select data-oid='6i3iq1s'>
                {_.map(calcsOptions, (item, key) => {
                  return (
                    <Select.Option key={key} value={key} data-oid='aikq27-'>
                      {t(`calcs.${key}`)}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={8} data-oid='dy46fts'>
            <Form.Item label={t('panel.custom.valueField')} name={[...namePrefix, 'valueField']} tooltip={t('panel.custom.valueField_tip')} data-oid='wkm.1k3'>
              <Select data-oid='6.78_99'>
                {_.map(fields, (item) => {
                  return (
                    <Select.Option key={item} value={item} data-oid='4vgnzrl'>
                      {item}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={8} data-oid='nqflmrp'>
            <Form.Item label={t('panel.custom.nameField')} name={[...namePrefix, 'nameField']} tooltip={t('panel.custom.nameField_tip')} data-oid='i4s6391'>
              <Select allowClear data-oid='l1r7wgv'>
                {_.map(statFields, (item) => {
                  return (
                    <Select.Option key={item} value={item} data-oid='6_e3pqk'>
                      {item}
                    </Select.Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10} data-oid='a04:oia'>
          <Col span={8} data-oid='4mxrmqe'>
            <Form.Item label={t('panel.custom.serieWidth')} data-oid='z805ju3'>
              <Input.Group data-oid='vivf4e8'>
                <Form.Item noStyle name={[...namePrefix, 'serieWidth']} data-oid='f5mkwfg'>
                  <InputNumber style={{ width: '100%' }} placeholder='auto' data-oid='sx6bpte' />
                </Form.Item>
                <span className='ant-input-group-addon' data-oid='00mw8j3'>
                  %
                </span>
              </Input.Group>
            </Form.Item>
          </Col>
          <Col span={8} data-oid='g_nnn92'>
            <Form.Item label={t('panel.custom.sortOrder')} name={[...namePrefix, 'sortOrder']} data-oid='ndnm99p'>
              <Select data-oid='w592o_d'>
                <Select.Option value='none' data-oid='e1u0ak0'>
                  None
                </Select.Option>
                <Select.Option value='asc' data-oid='3l:o19_'>
                  Asc
                </Select.Option>
                <Select.Option value='desc' data-oid='ma1-pbq'>
                  Desc
                </Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={5} data-oid='nf:0y32'>
            <Form.Item label={t('panel.custom.maxValue')} name={[...namePrefix, 'maxValue']} data-oid='y8iag3m'>
              <InputNumber placeholder='auto' style={{ width: '100%' }} data-oid='kwsdk_:' />
            </Form.Item>
          </Col>
          <Col span={3} data-oid='zfqcci3'>
            <Form.Item label={t('panel.custom.baseColor')} name={[...namePrefix, 'baseColor']} data-oid='v_vpcr8'>
              <ColorPicker data-oid='pqhgg3.' />
            </Form.Item>
          </Col>
          <Col span={8} data-oid='_ffn:tw'>
            <Form.Item label={t('panel.custom.barGauge.topn')} name={[...namePrefix, 'topn']} data-oid='m7sp1by'>
              <InputNumber style={{ width: '100%' }} data-oid='9bzacep' />
            </Form.Item>
          </Col>
          <Col span={8} data-oid='.ad-r22'>
            <Form.Item
              label={t('panel.custom.barGauge.combine_other')}
              tooltip={t('panel.custom.barGauge.combine_other_tip')}
              name={[...namePrefix, 'combine_other']}
              valuePropName='checked'
              data-oid='9i9qmwr'
            >
              <Switch data-oid='0zls:30' />
            </Form.Item>
          </Col>
          <Col span={8} data-oid='dd8zggk'>
            <Form.Item
              label={t('panel.custom.barGauge.otherPosition.label')}
              tooltip={t('panel.custom.barGauge.otherPosition.tip')}
              name={[...namePrefix, 'otherPosition']}
              initialValue='none'
              data-oid='zgwp40l'
            >
              <Select
                options={[
                  {
                    label: t('panel.custom.barGauge.otherPosition.options.none'),
                    value: 'none',
                  },
                  {
                    label: t('panel.custom.barGauge.otherPosition.options.top'),
                    value: 'top',
                  },
                  {
                    label: t('panel.custom.barGauge.otherPosition.options.bottom'),
                    value: 'bottom',
                  },
                ]}
                data-oid='49wg4lh'
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={10} data-oid='lkhqtzb'>
          <Col span={24} data-oid='ap1qkf_'>
            <Form.Item
              label={t('panel.custom.detailUrl')}
              name={[...namePrefix, 'detailUrl']}
              tooltip={{
                overlayInnerStyle: { width: 330 },
                title: <Trans ns='dashboard' i18nKey='dashboard:var.help_tip' components={{ 1: <br data-oid='obkkxqs' /> }} data-oid='jc.tya0' />,
              }}
              data-oid='hwf9_-c'
            >
              <Input style={{ width: '100%' }} data-oid='7xhhl3r' />
            </Form.Item>
          </Col>
        </Row>
      </>
    </Panel>
  );
}
